<template>
  <div class="personalData">
    <back-nav
      :leftArrow="true"
      :title="'个人资料'"
      :leftText="'返回'"
    ></back-nav>
    <div class="palcehode"></div>
    <div class="personalBox">
      <div class="personal">
        <div class="personalItem">
          <div class="itemText">头像</div>
          <div class="txIcon">
            <van-uploader :after-read="afterRead">
                  <img :src="information.userImg" class="auto-img" />
            </van-uploader>
          </div>
        </div>
        <div class="personalItem">
          <div class="itemText">用户id</div>
          <div class="idText">
            {{ information.userId }}
          </div>
        </div>
        <div class="personalItem">
          <div class="itemText">昵称</div>
          <div class="idText">
            <input
              type="text"
              v-model="nickName"
              class="nikeName"
              @blur="rewriteName"
            />
          </div>
        </div>
        <div class="personalItem">
          <div class="itemText">简介</div>
          <div class="idText">
            <input
              type="text"
              v-model="descContent"
              class="personalContent"
              @blur="rewriteInformation"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backNav from "../components/BackNav.vue";
export default {
  name: "personalData",
  data() {
    return {
      information: "",
      nickName: "",
      descContent: "",
    };
  },
  components: {
    backNav,
  },
  methods: {
    // 查询我的界面
    getAccountInfo() {
      this.axios({
        method: "get",
        url: "/findAccountInfo",
      })
        .then((res) => {
          console.log(res);
          if ((res.data.code = "A001")) {
            this.information = res.data.result[0];
            this.nickName = res.data.result[0].nickName;
            if (res.data.result[0].desc == "") {
              this.descContent = "这个人很懒,什么都没留下";
            } else {
              this.descContent = res.data.result[0].desc;
            }
            console.log(this.information);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改昵称
    rewriteName() {
      this.axios({
        method: "post",
        url: "/updateNickName",
        data: {
          nickName: this.nickName,
        },
      })
        .then((res) => {
          if (res.data.code == "C001") {
            this.$toast(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改简介
    rewriteInformation() {
      this.axios({
        method: "post",
        url: "/updateDesc",
        data: {
          desc: this.descContent,
        },
      })
        .then((res) => {
          if (res.data.code == "D001") {
            this.$toast(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 上传头像
    afterRead(file) {
      let imgType=file.file.type;
      let serverBase64Img=file.content;
      serverBase64Img= serverBase64Img.replace(/^data:image\/[A-Za-z]+;base64,/, '')
     imgType=imgType.split("/")
      imgType=imgType.splice(imgType.length-1,1).join("")
      this.axios({
          method:"post",
          url:"/updateAvatar",
          data:{
              imgType,
              serverBase64Img
          }
      }).then(res=>{
         if(res.data.code=="H001"){
             this.$toast(res.data.msg);
             this.$router.go(0);
         }
      }).catch(err=>{
          console.log(err);
      })
    },
  },
  created() {
    this.getAccountInfo();
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
.personalData {
  .palcehode {
    height: 100px;
    width: 100%;
    background-color: @mainColor;
  }
  .personalBox {
    padding: 0px 10px;
    transform: translateY(-25px);
    .personal {
      background-color: #fff;
      border-radius: 10px 10px 0px 0px;
      height: 280px;
      .personalItem {
        height: 55px;
        display: flex;
        align-items: center;
        padding: 0px 10px;
        border-bottom: 1px solid #e6e6e6;
        .txIcon {
          height: 30px;
          width: 30px;
          margin-left: auto;
          border-radius: 50%;
          overflow: hidden;
        }
        .idText {
          margin-left: auto;
          color: #9e9898;
          .nikeName {
            text-align: end;
            border: 0; // 去除未选中状态边框
            outline: none; // 去除选中状态边框
            background-color: rgba(0, 0, 0, 0); // 透明背景
          }
          .personalContent {
            text-align: end;
            border: 0; // 去除未选中状态边框
            outline: none; // 去除选中状态边框
            background-color: rgba(0, 0, 0, 0); // 透明背景
          }
        }
      }
    }
  }
}
</style>